<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>修改用户昵称</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            margin: 0 auto;
            width: 80%;
            margin-top: 50rem;
            border-bottom: 2rem solid #858484;
            padding-bottom: 14.5rem;
        }
        .wrap input{
            border: none;
            background: none;
            outline: none;
        }
        button{
            position: absolute;
            left: 50%;
            margin-left: -44rem;
            margin-top: 112.5rem;
            border: none;
            outline: none   ;
            background: rgb(106, 116, 247);
            border-radius: 22rem;
            width: 88rem;
            height: 24.5rem;
            line-height: 24.5rem;
            color: #ffffff;
            font-size: 16.19rem;
            cursor:pointer;
        }
    </style>
    <script>
        !function(n){
            var  e=n.document,
            t=e.documentElement,
            i=37500,
            d=i/100,
            o="orientationchange"in n?"orientationchange":"resize",
            a=function(){
                var n=t.clientWidth||320;n>720&&(n=720);
                t.style.fontSize=n/d+"px"
            };
            e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
        }(window);
    </script>
</head>
<body>
    
    <div class="wrap">
        <input type="text" value="Mr.1iu">
    </div>
    <button>提交</button>
</body>
</html>